<template>
  <div class="chat">
    <div
      class="content"
      v-loading="isLoading"
      element-loading-custom-class="custom-loading"
    >
      <div
        class="message-container"
        v-for="(message, index) in messages"
        :key="index"
      >
        <div
          :class="[
            'message',
            message.role === '我' ? 'user-message' : 'assistant-message',
          ]"
        >
          <p v-html="renderMarkdown(message.content)"></p>
        </div>
      </div>
    </div>
    <div class="input-container">
      <input
        v-model="inputMessage"
        @keyup.enter="sendMessage"
        placeholder="输入你的消息，开始和我交流诗词吧"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { marked } from "marked";
import * as echarts from "echarts";
import { deepseekApi } from '../api/deepseek';

const messages = ref(
  localStorage.getItem("chatMessages")
    ? JSON.parse(localStorage.getItem("chatMessages"))
    : [{ role: "assistant", content: "我是你的诗词陪读哦." }]
);
const inputMessage = ref("");
const isLoading = ref(false);

const renderMarkdown = (content) => {
  return marked(content);
};

const sendMessage = async () => {
  if (inputMessage.value.trim()) {
    messages.value.push({ role: "user", content: inputMessage.value });
    localStorage.setItem("chatMessages", JSON.stringify(messages.value));
    isLoading.value = true;
    inputMessage.value = "";
    try {
      const response = await deepseekApi.post('/', {
        messages: messages.value,
        model: "deepseek-chat",
      });
      messages.value.push({
        role: "assistant",
        content: response.data.choices[0].message.content,
      });
      localStorage.setItem("chatMessages", JSON.stringify(messages.value));
    } catch (error) {
      console.error("获取回复时出错:", error);
    } finally {
      isLoading.value = false;
    }
    inputMessage.value = "";
  }
};

const initLoadingChart = () => {
  const loadingContainer = document.createElement("div");
  loadingContainer.style.width = "200px";
  loadingContainer.style.height = "200px";
  const chart = echarts.init(loadingContainer);
  const option = {
    graphic: {
      type: "group",
      children: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "正在加载...",
            fontSize: 20,
            fill: "#4a90e2",
          },
          keyframeAnimation: {
            duration: 2000,
            loop: true,
            keyframes: [
              {
                percent: 0,
                style: {
                  text: "正在加载...",
                },
              },
              {
                percent: 33,
                style: {
                  text: "请稍候...",
                },
              },
              {
                percent: 66,
                style: {
                  text: "马上就好...",
                },
              },
            ],
          },
        },
      ],
    },
  };
  chart.setOption(option);
  return loadingContainer;
};

// 在页面加载完成后初始化加载图表
const loadingChart = initLoadingChart();
</script>

<style scoped>
/* 修改 .chat 样式 */
.chat {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #3766e79d; /* 更换为单一主题色 */
  transition: background 0.3s ease;
}

.content {
  align-items: center;
  justify-content: center;
}

.message-container {
  margin: 0 auto 1.5rem auto;
  max-width: 800px;
}

.message {
  padding: 1.2rem; /* 增加内边距 */
  border-radius: 1.2rem; /* 增加圆角 */
  max-width: 70%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 更明显的阴影 */
  animation: fadeIn 0.5s ease-in-out;
  transition: transform 0.2s ease;
}

.message:hover {
  transform: translateY(-3px); /* 悬停效果 */
}

.user-message {
  background-color: #ce5548;
  color: white;
  margin-left: auto;
  border-bottom-right-radius: 0;
}

.assistant-message {
  background-color: #9844f86f;
  color: white;
  border-bottom-left-radius: 0;
}

.input-container {
  margin-top: 0;
  margin-bottom: 60px;
  width: 100%;
  max-width: 800px;
  align-self: center; /* 确保输入框居中对齐 */
}

input {
  width: 100%;
  padding: 1.2rem;
  border: none;
  border-radius: 2.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: box-shadow 0.3s ease;
}

input:focus {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 聚焦效果 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .chat {
    padding: 1rem;
  }
  .message {
    max-width: 90%;
    font-size: 0.9rem;
  }
  input {
    padding: 0.8rem;
  }
}
.message p {
  text-align: left;
  text-indent: 2em;
}
.custom-loading .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.7); /* 更高级的加载遮罩 */
}
.custom-loading .el-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.custom-loading .el-loading-spinner .el-loading-text {
  display: none;
}
</style>
